<template>
	<view>
		<view class="title_box align-start bg-cyan" v-if="book_data">
			<view class="title-image">
				<image :src="book_data.book_thumb" mode="aspectFit"></image>
			</view>
			<view class="margin-top title-title">
				<view>
					<text style="font-weight: bold; font-size: 30rpx;">{{book_data.title}}</text>
				</view>
				<view class="margin-top">
					<text style="font-size: 30rpx;">{{book_data.author}} / {{book_data.publishing_house}}</text>
				</view>
				<view class="margin-top">
					<button size="mini" v-if="!book_data.ordered" @click="orderBook">借阅</button>
					<button size="mini" v-if="book_data.ordered&&book_data.uid==uid" @click="returnBook">归还</button>
					<button class="bg-red" size="mini" v-if="book_data.ordered&&book_data.uid!=uid">已借出</button>
				</view>
			</view>
		</view>
		<view class="bg-white">
			<view class="flex justify-between align-end solids-bottom" style="padding: 20rpx 20rpx 20rpx 20rpx;">
				<view class="text-lg text-bold" style="color: #39B54A;">书评</view>
				<view>
					<text class="cuIcon-appreciatefill text-red" style="font-size: 40rpx;" v-if="isLike"></text>
					<text class="cuIcon-appreciate text-red" style="font-size: 40rpx;" v-if="!isLike" @click="likeIt"></text>
					<text>{{reading_notes_info.likes.length}}</text>
				</view>
			</view>
			<view class="flex align-center padding">
				<view class="cu-avatar round" :style="'background-image:url('+reading_notes_info.avatar+');'"></view>
				<view class="margin-left text-xl">{{reading_notes_info.nickname}}</view>
			</view>
			<view class="padding">
				<text >{{reading_notes_info.reading_notes}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	const db = uniCloud.database();
	const app = getApp();
	export default {
		data() {
			return {
				book_data:null,
				reading_notes_info: null,
				isLike: false,
				read_id: null
			}
		},
		onLoad:function(e) {
			db.collection("library-books").where({
				book_id: e.book_id
			}).get().then(res => {
				this.book_data = res.result.data[0];
			})
			this.read_id = e.rid;
			db.collection("library-reading-notes").doc(e.rid).get().then(res => {
				this.reading_notes_info = res.result.data[0]
				if (this.reading_notes_info.likes.indexOf(app.globalData.uid) == -1) {
					this.isLike = false ;
				} else {
					this.isLike = true ;
				}
			})
		},
		methods: {
			likeIt: function(e) {
				this.reading_notes_info.likes.push(app.globalData.uid)
				db.collection("library-reading-notes").doc(this.read_id).update({
					likes: this.reading_notes_info.likes
				}).then(() => {
					this.isLike = true
				})
			}
		}
	}
</script>

<style>
	.title_box {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.title-image {
		flex: 1;
		position: relative;
		width: 30%;
		top: -60rpx;
		margin: 20rpx;
	}

	.title-title {
		flex: 2;
	}
</style>
